<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../src/css/pager.css">
    <!--来自百度的cdn-->
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../src/js/jquery.pager.js"></script>
</head>
<body>
<!--只做参考，不能运行-->
<div class="tableContainer">
    <table class="videotable" id="myTable" width="100%">
        <tbody>
        <tr>
            <th scope="col" width="11%">姓名</th>
            <th scope="col" width="14%">性别</th>
            <th scope="col">操作</th>
        </tr>
        </tbody>
        <tbody id="content">
        </tbody>
    </table>
</div>
<div class="footer">
    <div id="pager" class="yahoo2"></div>
</div>
<script>
    $(function () {
        loadData(1);
        loadData = function (pageIndex) {
            $.ajax({
                url: "../xxx/page",
                data: {
                    pageIndex: pageIndex
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    var table = $("#content");
                    $("#content tr").remove();
                    var list = data.list;
                    var html = createTable(list);
                    table.append(html);
                    total = data.total;
                    createPage(total, pageIndex, keyword);
                }
            });
        };
        function createPage(total, pageIndex, keyword) {
            $("#pager").pager(total, {
                pageSize: 18,
                keyword: keyword,
                currentPage: pageIndex,
                spanInterval: 2,
                callback: loadData
            });
        }
        function createTable(list) {

        }
    });//
</script>
</body>
</html>